<template>
  <page-layout>
    <template #title>
      <div class="layout-flex">
        <div class="layout-inline">
          <el-select v-model="queryObj.dataType" placeholder="数据类型" clearable :style="{ width: '100%' }">
            <el-option
              v-for="(item, index) in dataTypeOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </div>
        <div class="layout-inline">
          <el-date-picker
            type="daterange"
            v-model="dateRange"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            :style="{ width: '100%' }"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            range-separator="至"
            clearable
          ></el-date-picker>
        </div>
      </div>
    </template>
    <card-panel>
      <el-table-block2
        :column="column"
        :data="rows"
        border
        :pagination="true"
        :currentPage="pagination.pageNo"
        :pageSize="pagination.pageSize"
        :total="pagination.total"
        @currentChange="handleCurrentChange"
      />
    </card-panel>
  </page-layout>
</template>

<script>
import dayjs from 'dayjs'
import serviceMap from '@/views/theApp/common/serviceMap'

export default {
  name: 'QueryData',
  props: {
    monitorType: {
      type: String,
      default: 'airtype'
    },
    pointCode: {
      type: String,
      default: ''
    }
  },
  data() {
    const startTime = dayjs()
      .subtract(6, 'month')
      .format('YYYY-MM-DD')
    const endTime = dayjs().format('YYYY-MM-DD')
    return {
      pagination: {
        total: 0,
        pageNo: 1,
        pageSize: 15
      },
      queryObj: {
        monitorType: this.monitorType,
        dataType: 3,
        startTime,
        endTime,
        pointCode: this.pointCode
      },
      dateRange: [startTime, endTime],
      monitorTypeOptions: [
        {
          label: '全部',
          value: 1
        },
        {
          label: '图表',
          value: 2
        },
        {
          label: '列表',
          value: 3
        }
      ],
      dataTypeOptions: [
        {
          label: '分钟数据',
          value: 2
        },
        {
          label: '小时数据',
          value: 3
        },
        {
          label: '日数据',
          value: 4
        }
      ],
      column: [
        { label: '监测时间', prop: 'monitorTimeCn', align: 'center' },
        { label: '监测因子', prop: 'factorName', align: 'center' },
        { label: '监测值', prop: 'monitorValue', align: 'center' },
        { label: '超标上限', prop: 'exceedMaxLimit', align: 'center' },
        { label: '超标下限', prop: 'exceedMinLimit', align: 'center' },
        { label: '标准值', prop: 'emissionStandard', align: 'center' },
        { label: '单位', prop: 'unit', align: 'center' }
        // {
        //   label: '操作',
        //   prop: '操作',
        //   align: 'center',
        //   width: 300,
        //   renderBody: (h, { row, $index }) => {
        //     return (
        //       <div>
        //         <el-link
        //           type="primary"
        //           class="color-base"
        //           onClick={() => {
        //             this.handleAddFactor(row)
        //           }}
        //         >
        //           设置监测项目
        //         </el-link>
        //         <split-vline class="margin-left-15 margin-right-15"></split-vline>
        //         <el-link
        //           type="primary"
        //           className="color-base"
        //           onClick={() => {
        //             this.editEquip(row)
        //           }}
        //         >
        //           修改
        //         </el-link>
        //         <split-vline class="margin-left-15 margin-right-15"></split-vline>
        //         <el-link
        //           type="primary"
        //           class="color-base"
        //           onClick={() => {
        //             this.removeRow(row)
        //           }}
        //         >
        //           删除
        //         </el-link>
        //       </div>
        //     )
        //   }
        // }
      ],
      rows: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    handleCurrentChange(v) {
      this.pagination.pageNo = v
      this.getData()
    },
    getData() {
      const { monitorType, pointCode } = this
      const { pageNo, pageSize } = this.pagination
      const { startTime, endTime } = this.queryObj
      const queryObj = Object.assign({}, this.queryObj, {
        pointCode,
        monitorType,
        pageNo,
        pageSize,
        startTime: startTime == '' ? '' : `${startTime} 00:00:00`,
        endTime: endTime == '' ? '' : `${endTime} 23:59:59`
      })
      serviceMap[this.monitorType].alarmAlarmMonitorData(queryObj).then(res => {
        this.rows = res.rows
        this.pagination.total = res.total
      })
    }
  },
  watch: {
    queryObj: {
      handler() {
        this.getData()
      },
      deep: true
    },
    pointCode() {
      this.getData()
    }
  }
}
</script>

<style scoped></style>
